<template>
  <div >
    <h3>Hey!My friend!</h3>
    <ul>
      <li>姓名：<input type="text" v-model="name" /></li> 
      <li>年龄：<input type="number" v-model="age"/></li>
      <li>电话：<input type="tel" v-model="tel"/></li>
      <li>性别：
        <label v-for="(item,index) in genderArr" :key="index"><input type="radio" name="gender" :value="item" v-model="gender"/>{{item}}</label>
        </li>
      <li>血型：<select name="blood" v-model="blood">
                  <option v-for="(item,index) in bloodArr" :key="index" :value="item">{{item}}</option>
                  </select>
      </li>
      <li>爱好：<label v-for="(item,index) in hobbyArr" :key="index"><input v-model="hobby" type="checkbox" :value="item.value"/>{{item.label}}</label>
      </li>
      <li >评分：
        <div class="start">
          <span v-for="(item,index) in starArr" :key="index" class="start">
            <input type="radio" :id="'rate_1_0_1_'+(index+1)" name="starLevel" :value="item.value" v-model="starLevel"/> 
            <label :for="'rate_1_0_1_'+(index+1)"><span :id="(index+1)" @click="handleStart((index+1))">✩</span></label>
          </span>
          </div>
      </li>
      <div class="btn">
        <button @click="handleReset">重置</button>
        <button @click="handleCompleted">完成</button>
        <button @click="handleCancel">取消</button>
      </div>
    </ul>
  </div>
</template>

<script>


export default{
  name:'Add',
  data(){
    return{
      classmateArr: [],
      name:'',
      age:'',
      tel:'',
      genderArr:['男','女'],
      gender:'',
      blood:'',
      bloodArr:['A','AB','B','O','其他'],
      hobby:[],
      hobbyArr:[{value:'美食',label:'美食'},{value:'摄影',label:'摄影'},{value:'游戏',label:'游戏'},
                {value:'综艺',label:'综艺'},{value:'音乐',label:'音乐'}],
      starLevel:'',
      starArr:[{label:'✩',value:'★✩✩✩✩'},
        {label:'✩',value:'★★✩✩✩'},
        {label:'✩',value:'★★★✩✩'},
        {label:'✩',value:'★★★★✩'},
        {label:'✩',value:'★★★★★'}],
      
      
    }
  },
  methods:{
    reset(){
        this.name=''
        this.age=''
        this.tel=''
        this.gender=''
        this.hobby=[]
        this.blood=''
        this.starLevel=''
    },
    handleReset(){
        this.reset()
    },
    handleCompleted(){
      let obj={
        id:this.$store.state.classmateArr.length+1,
        name:this.name,
        age:this.age,
        tel:this.tel,
        gender:this.gender,
        hobby:this.hobby,
        blood:this.blood,
        starLevel:this.starLevel,
        isCorrect:false
      }
      if(this.name && this.age &&this.tel){
        this.$store.commit('add',[...this.vuexClassMateArr,obj])
      }else{
        alert('请完善信息！')
      }
      this.$router.push('/')
      this.reset()
      for(let i=1;i<6;i++){
          document.getElementById(i).innerHTML='✩'
      }
    },
    handleCancel(){
      this.$router.push('/')
    },
    handleStart(index){
      for(let i=1;i<index+1;i++){
        document.getElementById(i).innerHTML='★'
      }
      for(let j=index+1;j<6;j++){
        document.getElementById(j).innerHTML='✩'
      }
    }
  },
  computed:{
    vuexClassMateArr(){
      return this.$store.state.classmateArr
    }
  }
}
</script>
<style>
  .btn{
    margin-top:10px;
    margin-left:100px
  }
  .start>input[type=radio] {
    opacity: 0;
    margin:0;
    padding:0;
    width:0;
    height:0
  }
  .start{
    display: inline-block;
  }
  .start>label{
    margin:0;
    padding:0;
    float:left
  }
</style>